<template>
  <div>
    <div class="box-img">
      <div id="allDiv" >
        <img
        @click="mous"
          id="demoImg"
          alt="图片"
          class="demoImg "
          src="https://www.shantuai.com:8090/freight/file/view/21849?accessToken=6e4d319375fd4db5b6fec9490778fbdc&preview=true"
        />
        <div class="bottom">
        <div 
        >
          <button
            class="btn"
            type="button"
            @click="SetImgRotate(0)"
            id="btnLeft"
          >
            左旋转
          </button>
          <button
            class="btn"
            type="button"
            @click="SetImgRotate(1)"
            id="btnRight"
          >
            右旋转
          </button>
        </div>
      </div>
      </div>
      
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {};
  },
  methods: {
    mous(){
      
    },
    SetImgRotate(leftOrRight) {
      var current = 0;
      var img = document.getElementById("demoImg");
      if (leftOrRight == 0) {
        //左旋转
        current = (current - 90) % 360;
      } else if (leftOrRight == 1) {
        //右旋转
        current = (current + 90) % 360;
      }
      img.style.transform = "rotate(" + current + "deg)";
    },
  },
};
</script>
     <style type="text/css">
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
/*包裹图片div样式*/
/* #allDiv {
  font-family: "微软雅黑";
  font: 14px/1.8 arial;
} */
/*图片样式*/
.demoImg {
  margin-left: 1%;
  width: 25%;
  height: 25%;
  background-color: Gray;
  border: none;
  margin-bottom: 50px;
}
.bottom {
  /* width: 100%;
  position: fixed;
  bottom: 10px;
  text-align: center; */
}
.btn {
  /* cursor: pointer; */
  width: 100px;
  height: 35px;
  background: rgba(38, 38, 38, 0.6);
  border: 0px;
  color: white;
}
</style>